<template>
  <div class="shopcart">
    <van-sticky>
      <van-nav-bar>
        <h2 slot="left" class="title">购物车</h2>
        <span slot="right">管理</span>
      </van-nav-bar>
    </van-sticky>
    <van-panel v-for="(item,index) in shopData" :key="index">
      <div class="content_box">
        <van-checkbox v-model="item.checked" class="checkbox"></van-checkbox>
        <img :src="item.goods_img" alt class="goods_img" />
        <div class="xiangqing_box">
          <h5 class="goods_name">{{item.goods_name}}</h5>
          <div>
            <span class="goods_price">{{'￥'+item.goods_price}}</span>
            <van-field name="stepper">
              <template #input>
                <van-stepper v-model="item.stepper" />
              </template>
            </van-field>
          </div>
        </div>
      </div>
    </van-panel>
    <div class="jisuan">
       <van-checkbox v-model="quanxuan" class="checkbox">全选</van-checkbox>
       <div>
         <span>合计：{{heji}}</span>
         <van-button round type="info" size="small">结算</van-button>
       </div>
    </div>
  </div>
</template>
<script>
// 导入网络封装模块
import { request } from "@/axios/request";
export default {
  name: "Shopcart",
  data() {
    return {
      shopData: [
        {
          checked: false,
          goods_img:
            "http://yanxuan.nosdn.127.net/fc0291ab325830575c58b281c6e4ee09.jpg",
          goods_name: "新年礼盒 双宫茧纱布美肤手工蚕丝被",
          goods_price: 1599,
          stepper: 1
        },
        {
          checked: false,
          goods_img:
            "http://yanxuan.nosdn.127.net/b4706343b3817e690d778e5f8a68a8de.jpg",
          goods_name: "北欧极简直杆台灯",
          goods_price: 249,
          stepper: 1
        },
        {
          checked: false,
          goods_img:
            "http://yanxuan.nosdn.127.net/c8527661e3c87a530e30bd110a14faa9.png",
          goods_name: "天鹅船创意摆件",
          goods_price: 99,
          stepper: 1
        },
        {
          checked: false,
          goods_img:
            "http://yanxuan.nosdn.127.net/dc4b2d5ddc48557bd9bdce6742b66562.jpg",
          goods_name: "多功能人体工学转椅",
          goods_price: 1399,
          stepper: 1
        },
        {
          checked: false,
          goods_img:
            "http://yanxuan.nosdn.127.net/c8527661e3c87a530e30bd110a14faa9.png",
          goods_name: "天鹅船创意摆件",
          goods_price: 99,
          stepper: 1
        }
      ],
      quanxuan:false,
      
    };
  },
  created(){
    
  },
  
  components: {},
  watch:{
    quanxuan:function(val){
      for(let item of this.shopData){
        item.checked = val
      }
    },
    
  },
  computed:{
    heji(){
      let heji = 0;
      let arr = this.shopData.filter(item =>{
        return item.checked == true;
      })
      for(let item of arr){
        heji += item.goods_price*item.stepper
      }
      return heji;
    },
    
  }
};
</script>
<style lang="less" scoped>
.shopcart {
  margin-bottom: 50px;
}
.van-panel {
  margin-top: 10px;
  // background-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 10px;
}

.van-nav-bar {
  height: 40px;
}
.title {
  margin: 0;
}
.van-cell {
  padding: 0;
}
.content_box {
  display: flex;
  .checkbox {
    flex: 10%;
  }
  .goods_img {
    width: 100px;
    height: 100px;
    flex: 30%;
  }
  .xiangqing_box {
    flex: 60%;
    display: flex;
    flex-direction: column;
    .goods_name {
      flex: 1;
      margin: 0;
      box-sizing: border-box;
      padding: 10px;
    }
    > div {
      flex: 1;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      .goods_price {
        flex: 30%;
        line-height: 28px;
        color: red;
      }
      > .van-field {
        flex: 60%;
      }
    }
  }
}
.jisuan{
  display: flex;
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  background-color: white;
  >.van-checkbox{
    flex: 1;
    font-size: 16px;
  }
  >div{
    flex: 1;
    font-size: 12px;
    color: red;
    text-align: right;
  }
}
</style>
